<template>
  <div class="app-container">
    <div class="app-box">
      <a-menu v-model="current" mode="horizontal" style="margin-bottom: 10px">
        <a-menu-item key="1" @click="changeTab('1')" :style="hteFile.id ? 'width:20%' : 'width:25%'">
          <a-icon type="read" /> 正文内容</a-menu-item
        >
        <a-menu-item key="2" @click="changeTab('2')" :style="hteFile.id ? 'width:20%' : 'width:25%'">
          <a-icon type="menu-unfold" /> 关键信息</a-menu-item
        >
        <a-menu-item key="3" @click="changeTab('3')" :style="hteFile.id ? 'width:20%' : 'width:25%'">
          <a-icon type="solution" /> 共享范围({{rangeTotal}})</a-menu-item
        >
        <a-menu-item key="4" @click="changeTab('4')" v-if="hteFile.id" :style="hteFile.id ? 'width:20%' : 'width:25%'"
          ><a-icon type="monitor" />操作日志({{logTotal}})</a-menu-item
        >
        <a-menu-item key="5" @click="changeTab('5')" :style="hteFile.id ? 'width:20%' : 'width:25%'">
          <a-icon type="paper-clip" />附件({{attachTotal}})</a-menu-item
        >
      </a-menu>

      <a-card v-show="activeTab == '1'">
        <FileContentEditor ref="content" />
      </a-card>
      <a-card v-show="activeTab == '2'">
        <LibFileFormProject
          v-if="projectNo || projectLibFile.projectNo"
          ref="main"
          :parentId="parentId + ''"
          :hteFile="hteFile"
          :projectNo="projectNo ? projectNo : projectLibFile.projectNo"
        />
        <LibFileForm v-else ref="main" :parentId="parentId + ''" :hteFile="hteFile" />
      </a-card>
      <a-card v-show="activeTab == '3'">
        <FileRange ref="range" :hteFile="hteFile" @getTotal="(val)=>{rangeTotal = val}"/>
      </a-card>
      <a-card v-show="activeTab == '4'">
        <LibLog ref="libLog" :hteFile="hteFile" @getTotal="(val)=>{logTotal = val}"/>
      </a-card>
      <a-card v-show="activeTab == '5'">
        <LibFileAttach ref="attach" :hteFile="hteFile" :parentId="parentId + ''" v-show="hteFile.id" @reload="reload" @getTotal="(val)=>{attachTotal = val}"/>
        <div v-show="!hteFile.id">请先保存文件</div>
      </a-card>
      <div class="botton-bar">
        <!-- <span v-if="hteFile.publishState == '1' && hteFile.version == hteFile.draftVersion"
          >当前为发布版本:{{ hteFile.version }}</span
        >
        <span v-if="hteFile.publishState == '1' && hteFile.version != hteFile.draftVersion"
          >当前为修订版本:{{ hteFile.draftVersion }}</span
        > -->
        <a-button
          @click="saveHteFile(0)"
          :loading="loading"
          v-if="!hteFile.id || (hteFile.id && hteFile.publishState != 2 && hteFile.disable != 1)"
          >保存</a-button
        >
        <a-button
          @click="submitAudit()"
          :loading="loading"
          v-if="
            hteFile.id &&
            hteFile.publishState != 2 &&
            hteFile.disable != 1 &&
            hteFile.autoPublish &&
            (hteFile.state == 0 || hteFile.state == 4)
          "
          >提交审批</a-button
        >
        <a-button
          @click="auditHteFile(2)"
          v-if="
            hteFile.id && hteFile.publishState != 2 && hteFile.disable != 1 && hteFile.autoPublish && hteFile.state == 1
          "
          >通过</a-button
        >
        <a-button
          @click="auditHteFile(3)"
          v-if="
            hteFile.id && hteFile.publishState != 2 && hteFile.disable != 1 && hteFile.autoPublish && hteFile.state == 1
          "
          >不通过</a-button
        >
        <a-button
          @click="publishHteFile()"
          :loading="loading"
          v-if="
            hteFile.id &&
            !hteFile.autoPublish &&
            hteFile.publishState != 2 &&
            hteFile.disable != 1 &&
            (hteFile.state == 0 || hteFile.state == 4)
          "
          >发布</a-button
        >
        <a-button @click="handleAbolish()" v-if="hteFile.id && hteFile.publishState == 1">废止</a-button>
      </div>

      <div class="fixed-menu" v-if="hteFile.authority2 === 4">
        <div class="functionMould" style="background-color: #ffffff" @click="handleDelete">
          <a-icon type="codepen" class="menu-icon" />
          <span>删除文档</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FileContentEditor from '@/views/library/components/FileContentEditor'
import LibFileForm from '@/views/library/components/LibFileForm'
import LibFileAttach from '@/views/library/components/LibFileAttach'
import { getAction, postAction } from '@/api/manage'
import FileRange from './components/FilesRange'
import LibLog from './components/LibLog'
import LibFileFormProject from './components/LibFileFormProject.vue'
export default {
  components: {
    FileContentEditor,
    LibFileForm,
    LibFileAttach,
    FileRange,
    LibLog,
    LibFileFormProject,
  },
  
  props: {
    parentId: {
      type: Number,
      default: null,
    },
    fileId: {
      type: Number,
      default: null,
    },
    version: {
      type: Number,
      default: null,
    },
    projectNo: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      rangeTotal:0,
      logTotal:0,
      attachTotal:0,
      versionTotal:0,
      loading: false,
      current: ['1'],
      activeTab: '1',
      classTree: [],
      classAttrList: [],
      hteFile: {},
      urls: {
        libFileSaveByProject: '/lib/hteLibFile/saveByProject',
        libFileSave: '/lib/hteLibFile/saveByProject',
        libFileGet: '/lib/hteLibFile/getLibFile',
        submitAudit: '/lib/hteLibFile/submitAudit',
        auditLibFile: '/lib/hteLibFile/audit',
        deleteFile: '/lib/hteLibFile/delete',
        publishFile: '/lib/hteLibFile/publish',
        abolishFile: '/lib/hteLibFile/abolish',
        projectLibFileByFileId: '/hteProjectLibFile/projectLibFileByFileId',
      },

      type: 0,
      projectBuild: { projectNo: this.projectNo },
      projectLibFile: {},
    }
  },
  created() {
    // if (this.$route.params.id) {
    //   this.type = 2
    //   this.fileId = Number(this.$route.params.id)
    //   this.version = this.$route.params.v
    //   this.fetchHteFile()
    // }
    // this.initData();
    //  console.log("created")
  },
  mounted() {
    this.initData()
    console.log('mounted')
    if(this.projectNo){
      this.changeTab(2)
      this.current=["2"]
    }
  },
  watch: {
    $route(to, from) {
      // 在mounted函数执行的方法，放到该处
      this.initData()
      console.log('$route')
    },
  },
  methods: {
    initData() {
      //初始化数据
      if (this.$route.params.id) {
        this.type = 2
        this.fileId = Number(this.$route.params.id)
        this.version = this.$route.params.v
        this.fetchHteFile()
        if (this.fileId) {
          this.fetchProjectLibFile()
        }
      }
    },
    changeTab(tab) {
      this.activeTab = tab
    },

    /**
     * 保存文件信息
     */
    saveHteFile(action = 0) {
      let checkHteFile = this.$refs.main.checkHteFile()
      let checkClassAttr = this.$refs.main.checkClassAttr()
      let flag = this.$refs.main.checkHteFile() && this.$refs.main.checkClassAttr()
      if (flag) {
        let hteFile = this.$refs.main.getHteFile()
        //库类型
        hteFile.libraryType = this.parentId
        let content = this.$refs.content.getContent()
        this.$set(hteFile, 'content', content)
        let attrs = this.$refs.main.getClassAttr()
        this.$set(hteFile, 'attrs', attrs)
        this.loading = true
        console.log(hteFile.attrs)
        let url = this.urls.libFileSave
        if (this.projectNo || this.projectLibFile.projectNo) {
          url = this.urls.libFileSaveByProject
        }
        postAction(url, hteFile)
          .then((res) => {
            if (res.success) {
              if (action == 0) {
                if (this.$route.path.startsWith('/library/file/new') || this.version != res.result.draftVersion) {
                  this.$refs.main.classAttrList = !!res.result.attrs ? [...res.result.attrs] : []
                  if (this.hteFile.projectNo) {
                    this.reloadProject(res.result)
                  } else {
                    this.reload(res.result)
                  }
                } else {
                  this.fetchHteFile()
                }
                this.$message.success('保存成功')
              } else if (action == 1) {
                this.realPublish()
              }
            } else {
              this.$message.error('保存失败' + res.message)
            }
          })
          .finally((res) => {
            this.loading = false
          })
      } else {
        this.$message.error('保存失败:数据校验错误')
      }
    },
    fetchHteFile() {
      if (this.$route.path.startsWith('/library/file/edit')) {
        getAction(this.urls.libFileGet, { fileId: this.fileId, version: this.version, type: this.type }).then((res) => {
          if (res.success) {
            let result = res.result
            this.hteFile = result
            this.$refs.content.setContent(result.content)
            this.$refs.main.setHteFile(result)
          } else {
            this.hteFile = {}
            this.$message.error(res.message)
          }
        })
      }
    },
    submitAudit() {
      getAction(this.urls.submitAudit, { fileId: this.fileId }).then((res) => {
        if (res.success) {
          this.$message.success('文件已提交审批')
          this.fetchHteFile()
        } else {
          this.$message.error('文件提交审批失败')
        }
      })
    },
    auditHteFile(state) {
      getAction(this.urls.auditLibFile + '?fileId=' + this.fileId + '&state=' + state).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.fetchHteFile()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    publishHteFile() {
      this.saveHteFile(1)
    },
    realPublish() {
      getAction(this.urls.publishFile + '?fileId=' + this.hteFile.id).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.fetchHteFile()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleDelete() {
      getAction(this.urls.deleteFile + '?fileId=' + this.hteFile.id).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleAbolish() {
      getAction(this.urls.abolishFile + '?fileId=' + this.fileId).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    reload(hteFile) {
      this.hteFile = hteFile
      this.fileId = hteFile.id
      this.version = hteFile.draftVersion
      this.type = 2
      this.$router.push('/library/file/edit/' + this.parentId + '/' + hteFile.id + '/' + hteFile.draftVersion)
    },
    reloadProject(hteFile) {
      this.hteFile = hteFile
      this.type = 2
      this.$router.push(
        '/library/file/edit/' +
          this.parentId +
          '/' +
          hteFile.id +
          '/' +
          hteFile.draftVersion +
          '?projectNo=' +
          hteFile.projectNo
      )
    },
    fetchProjectLibFile() {
      getAction(this.urls.projectLibFileByFileId + '?id=' + this.fileId).then((res) => {
        if (res.success) {
          this.projectLibFile = res.result
        }
      })
    },
  },
}
</script>

<style scoped>
#app {
  background: #f5f5f5;
}
.app-container {
  position: relative;
  width: 100%;
  min-width: 1200px;
  background: #f5f5f5;
  height: 100%;
  justify-content: center;
  padding-top: 30px;
  padding-bottom: 0;
}
.botton-bar {
  position: fixed;
  bottom: 10px;
  z-index: 9;
  text-align: center;
  width: calc(100% - 194px);
}
.botton-bar button {
  width: 200px;
}
.app-box {
  width: calc(100% - 194px);
  min-width: 1200px;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

.fixed-menu {
  position: absolute;
  top: 48px;
  right: 0vw;
  z-index: 10000;
  width: 80px;
  right: -95px;
}
.functionMould {
  background-color: #ffffff;
  height: 80px;
  padding-top: 18px;
  text-align: center;
  margin-bottom: 10px;
  cursor: pointer;
}
.functionMould > span {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #000000;
  display: block;
}
.menu-icon {
  font-size: 24px;
  color: #31a0e1;
}
.ant-menu-item {
  border: 1px solid #31a0e13d !important;
  padding: 0 0px;
  /*width: 20%;*/
  text-align: center;
}
.ant-menu-item-selected {
  color: #ffffff !important;
  background: #31a0e1 !important;
}
</style>

<style scoped lang="less">
/deep/ .app-box .ant-card {
  height: calc(100% - 110px);
  overflow-y: auto;
}
/deep/ .app-box .ant-card .ant-card-body {
  height: 100%;
}
</style>
